import { StepsComponent } from './steps.component';
import { Component, OnInit,Input, Optional, ElementRef, ViewChild  } from '@angular/core';
import { SafeStyle, DomSanitizer } from '@angular/platform-browser';
import { removeNgTag } from '../shared/utils/index';

@Component({
  selector: 'el-step',
  templateUrl: './step.component.html'
})
export class StepComponent implements OnInit {
  root: StepsComponent;
  private el:any;
  private sanitizer:any;
  @Input() titleRef!: ElementRef;
  @Input() title: string = '';
  @Input() description: string = '';
  @Input() icon: string ='';
  @Input() status: string ='';
  @Input() index: number =0;
  @Input() mainOffset: string = '';
  constructor(root: StepsComponent, el: ElementRef, sanitizer: DomSanitizer){
      this.root = root;
      this.el = el;
      this.sanitizer = sanitizer;
  };

  ngOnInit(): void {
    this.index = +this.el.nativeElement.getAttribute('el-index');
        if (this.root.direction === 'horizontal' && this.root.alignCenter) {
            var /** @type {?} */ width = this.titleRef.nativeElement.getBoundingClientRect().width;
            this.mainOffset = width / 2 + 16 + 'px';
        }
        removeNgTag(this.el.nativeElement);
  }



  currentStatus() {
    if (this.root.active > this.index) {
        return this.root.finishStatus;
    }
    if (this.root.active === this.index) {
        return this.root.processStatus;
    }
    return 'wait';
  }

  makeStepStyles(){
    var /** @type {?} */ space = this.root.space;
        var /** @type {?} */ width = typeof space === 'number' ? space + "px" : space
            ? String(space) : 100 / (this.root.stepsLength - 1) + "%";
        var /** @type {?} */ lastStyles = this.isLast()
            ? "max-width: " + 100 / this.root.stepsLength + "%;"
            : "margin-right: " + this.root.offset + "px;";
        var /** @type {?} */ styles = "flex-basis: " + width + "; " + lastStyles;
        return this.sanitizer.bypassSecurityTrustStyle(styles);
  }

  makeLineStyles(){
    var /** @type {?} */ step = this.index === this.root.active - 1
            ? (this.currentStatus() !== 'error' ? 50 : 0)
            : this.currentStatus() === 'wait' ? 0 : 100;
        var /** @type {?} */ delay = (this.root.processStatus === 'wait' ? -1 : 1) * 150 * this.index + 'ms';
        var /** @type {?} */ key = this.root.direction === 'vertical' ? 'height' : 'width';
        var /** @type {?} */ styles = "border-width: " + (step ? '1px' : 0) + "; " + key + ": " + step + "%; transition-delay: " + delay + ";";
        return this.sanitizer.bypassSecurityTrustStyle(styles);
  }

  isLast(){
    return this.root.stepsLength - 1 === this.index;
  }

  isVertical(){
    return this.root.direction === 'vertical';
  }
}
